<template>
    <div>
        <search-bar @searchFocns="searchFocns" @onSearch="onSearch" :hotword="hotword" :isReal="true" v-model="keyword" />
        <template>
            <div v-show="isshow == 1">
                排行
            </div>
        </template>
        <template>
            <div v-show="isshow == 2">
                <history @onSearch="onSearch" :keyword="historyKeyword" />
            </div>
        </template>
        <template>
            <div v-show="isshow == 3">
                列表
            </div>
        </template>
    </div>
</template>
<script>
import { getSearchHotList } from '@/api/hot'
import searchBar from '../hot/components/search.vue'
import history from './components/history.vue'
export default {
    name: 'searchpage',
    components: {
        searchBar,
        history
    },
    data() {
        return {
            isshow: 1,
            hotword: '热门搜索',
            keyword: '',
            historyKeyword: '',
            showDel: false,
            // 搜索热门列表
            searchHotList: [],
            // 搜索历史列表
            searchHistoryList: [],
        }
    },
    methods: {
        searchFocns(mode) {
            this.isshow = mode;
        },
        onSearch(mode, keyword) {
            this.isshow = mode;
            this.keyword = keyword;
            this.historyKeyword = keyword;
        },
        // async getSearchHotList() {
        //     const { data } = await getSearchHotList();
        //     this.searchHotList = data.list;
        //     // 随机热门搜索
        //     this.searchTxt = this.searchHotList[Math.floor(Math.random() * this.searchHotList.length)].label;
        // }
    },
    created() {
        // this.getSearchHotList();
        // if (localStorage.getItem('searchHistoryList')) {
        //     this.searchHistoryList = localStorage.getItem('searchHistoryList').split(',');
        // }
    }
}
</script>
<style lang="less" scoped>
/deep/.van-search__content {
    border-radius: 20px;
}

.searchHotList {
    margin: 15px;
    box-shadow: 0px 0px 5px #e7e7e7;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;

    .item {
        .left {
            width: 25px;
            background-image: url('@/assets/images/ranking-other.png');
            background-repeat: no-repeat;
            background-position: 0px 13px;

            span {
                width: 25px;
                text-align: center;
                position: relative;
                left: 5px;
                top: 9px;
                font-size: 12px;
            }
        }

        p {
            margin-right: 50px;
            display: inline-block;
            padding: 0 25px 0 0;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            color: #333;
        }
    }
}

.top {
    justify-content: space-between;

    p {
        font-size: 14px;
        color: #333;
        padding: 5px 15px;
    }

    .van-icon {
        position: relative;
        top: 7px;
        right: 5px;
    }
}

.item:nth-child(1) {
    .left {
        background-image: url('@/assets/images/ranking-1.png');
        background-position: 0 13px;
        color: white;
    }

    p {
        background-image: url('@/assets/images/hot-icon.png');
        background-position: right;
        background-repeat: no-repeat;
    }
}

.item:nth-child(2) {
    .left {
        background-image: url('@/assets/images/ranking-2.png');
        background-position: 0 13px;
        color: white;
    }

    p {
        background-image: url('@/assets/images/hot-icon.png');
        background-position: right;
        background-repeat: no-repeat;
    }
}

.item:nth-child(3) {
    .left {
        background-image: url('@/assets/images/ranking-3.png');
        background-position: 0 13px;
        color: white;
    }

    p {
        background-image: url('@/assets/images/hot-icon.png');
        background-position: right;
        background-repeat: no-repeat;
    }
}

.searchHistory {
    width: 100%;
    flex-wrap: wrap;

    .historyItem {
        width: 50%;
        text-align: center;
        margin: 10px 0;
        height: 10px;
        line-height: 10px;
    }
}

// 第二个搜索历史有一个高度为15px的边框，border居中
.historyItem:nth-child(2n+1) {
    border-right: 1px solid #000;
    box-sizing: border-box;
    height: 10px;
    line-height: 10px;
}

.delTxt {
    font-size: 12px;
}
</style>
 <!-- <div class="searchHotList" v-if="isshow == 1">
            <div v-for="(item, index) in searchHotList" :key="item.id" class="flex item">
                <div class="left">
                    <span>{{ index + 1 }}</span>
                </div>
                <p>{{ item.label }}</p>
            </div>
        </div>
        <div class="searchList" v-if="isshow == 2">
            <div class="flex top">
                    <p>搜索历史</p>
                    <van-icon name="delete-o" v-if="!showDel" @click="showDel = true" />
                    <p v-else><span class="delTxt" @click="Dels">全部删除</span>&nbsp;/&nbsp;<span class="delTxt"
                            @click="showDel = false">取消</span></p>
                </div>
            <div v-if="!searchHistoryList.length">
                <p style="text-align: center;">暂无历史</p>
            </div>
            <div class="searchHistory flex">
                <p class="historyItem" v-for="(item, index) in searchHistoryList" :key="item">
                    {{ item }}
                    <van-icon v-if="showDel" @click="delIt(index)" style="padding-left: 10px" size=".9rem" name="clear" />
                </p>
            </div>
        </div> -->